import LogicFlow, {PolygonNode, PolygonNodeModel,h} from "@logicflow/core";

export default function registerCondition (lf:LogicFlow) {
  lf.register('condition', () => {
    class Node extends PolygonNode {
      getIconShape () {
        const {model} = this.props
        const {stroke} = model.getNodeStyle()
        return h(
            'svg',
            {
              x: 20,
              y: 18,
              width: 30,
              height: 30,
              viewBox: '0 0 1126 1024'
            },
            h(
                'path',
                {
                  fill: stroke,
                  d: 'M832 708.032A128.064 128.064 0 0 1 800 960a128 128 0 0 1-32-251.968V576a32 32 0 0 0-32-32H288a32 32 0 0 0-32 32v132.032A128.064 128.064 0 0 1 224 960a128 128 0 0 1-32-251.968V544a64 64 0 0 1 64-64h224V315.968A128.064 128.064 0 0 1 512 64a128 128 0 0 1 32 251.968V480h224a64 64 0 0 1 64 64v164.032zM512 256a64 64 0 1 0 0-128 64 64 0 0 0 0 128zM224 896a64 64 0 1 0 0-128 64 64 0 0 0 0 128z m576 0a64 64 0 1 0 0-128 64 64 0 0 0 0 128z'
                }
            )
        )
      }
      getShape () {
        const {model} = this.props
        const {width, height, x, y, points} = model
        const {fill, fillOpacity, strokeWidth, stroke, strokeOpacity,} = model.getNodeStyle()
        const transform = `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`
        const pointsPath = points.map((point:any[]) => point.join(',')).join(' ')
        return h(
            'g',
            {
              transform
            },
            [
              h(
                  'polygon',
                  {
                    points: pointsPath,
                    fill,
                    stroke,
                    strokeWidth,
                    strokeOpacity,
                    fillOpacity
                  }
              ),
              this.getIconShape()
            ]
        )
      }
    }
    class Model extends PolygonNodeModel {
      constructor (data:any, graphModel:any) {
        data.text = {
          value: (data.text && data.text.value) || '',
          x: data.x,
          y: data.y + 50
        }
        super(data, graphModel)
        const lenght = 35
        this.points = [
          [lenght, 0],
          [lenght * 2, lenght],
          [lenght, lenght * 2],
          [0, lenght]
        ]
      }
      initNodeData(data:any) {
        super.initNodeData(data)
        const lenght = 35
        this.points = [
          [lenght, 0],
          [lenght * 2, lenght],
          [lenght, lenght * 2],
          [0, lenght]
        ]
      }
      // 自定义锚点样式
      getAnchorStyle() {
        const style = super.getAnchorStyle();
        return Object.assign({}, style, {
            stroke: 'rgb(24, 125, 255)',
            r: 3,
            hover: {
              r: 8,
              fill: 'rgb(24, 125, 255)',
              stroke: 'rgb(24, 125, 255)',
            },
        });
      }
    }
    return {
      view: Node,
      model: Model
    }
  })
}
